<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit">
	<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="keywords" content="css,csssprite,雪碧图">
    <title>CSS-Sprite</title>
    <link rel="stylesheet" href="csssprite.css">
</head>
<body>
    <h1 class="page-title">
        <div class="container">
            CSS SPRITE GENERATE
        </div>
    </h1>

    <!-- 接受图片的表单 -->
    <div class="container">
        <form action="" class="img-input-form">
            <label class="select-img">
                <input type="file" multiple id="input-img">
                <span class="label-desc">选择图片 或 拖动图片到此</span>
            </label>
        </form>
    </div>

    <!-- 文件列表 -->
    <div class="img-list">
        <div class="container">
            <ul class="file-list js-file-list">
                <li class="file-li">
                    <span class="fileimg">缩略图</span>
                    <span class="filename">图片名称</span>
                    <span class="filesize">图片尺寸</span>
                    <span class="imgpos">图片位置</span>
                    <span class="ctnsize">外框尺寸</span>
                    <span class="filepos">外框位置</span>
                </li>
            </ul>
        </div>
    </div>

    <!-- img 容器 -->
    <div class="img-ctn"> 
    <div class="container">
        <!--  改变img容器的宽, 高, 背景 -->
        <form name="btns-wrap" class="btns-wrap-form">
            容器宽: <input type="number" name="ctn-width" value="18" min="10">
            容器高: <input type="number" name="ctn-height" value="18" min="10">
            容器背景: <input type="color" name="ctn-bg" value="#ffffff">
            水平居中图片: <input type="checkbox" name="align">
        </form>
        <div class="img-wrap js-img-wrap"></div>
    </div>
    </div>

    <!-- 生成图片按钮 -->
    <div class="create-img">
        <form name="create-img-form" class="container">
            <button type="button" id="create-img">生成图片</button>

            选择图片类型:
            <select name="img-type">
                <option value="image/png" checked>png</option>
                <option value="image/jpeg">jpeg</option>
            </select>

            <span class="img-quality">
                图片质量(0~1):
                <input type="range" min="0" max="1" step="0.01" value="0.92" name="img-quality">
                <b class="img-qua-num">0.92</b>
            </span>
        </div>
    </div>

    <!-- 最终的img  -->
    <div class="container">
        <img src="" name="combine-img">
    </div>

    <!-- img canvas -->
    <canvas width="100" height="100" id="canvas-img"></canvas>

<script src="csssprite.js" type="text/javascript"></script>
</body>
</html>

